<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
	*{margin: 0;padding: 0;list-style: none;}
	html,body{background: gray;display: flex;width: 100%;height: 100%;}
		.box{width: 850px;
			border:1px solid white;
			margin:auto;}
		.box ul{
			display: flex;
			width: 850px;
			flex-wrap: wrap;/*换行*/
			justify-content: space-around;/*在弹性盒对象的 元素中的各项周围留有空白*/
			margin-top: 20px;
		}
		.box ul li{
			width: 400px;
			height: 220px;
			border:1px solid white;
			position: relative;
			margin-bottom: 20px;
			overflow: hidden;
		}
		.box ul li img{
			position: absolute;
			width: 100%;
			height: 100%;
			vertical-align: top;/*设置元素的垂直对齐方式*/
			
		}
		.box ul li:hover img:nth-child(2){
			animation: run 0.6s;

		}
		@keyframes run {
			0%{transform: scale(1);opacity: 1;}
			100%{transform: scale(1.5);opacity: 0;}
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li><img src="img/kt1.jpg"><img src="img/kt1.jpg"></li>
			<li><img src="img/kt2.jpg"><img src="img/kt2.jpg"></li>
			<li><img src="img/kt3.jpg"><img src="img/kt3.jpg"></li>
			<li><img src="img/kt4.jpg"><img src="img/kt4.jpg"></li>
			<!-- <li><img src="img/kt1.jpg"><img src="img/kt1.jpg"></li>
			<li><img src="img/kt2.jpg"><img src="img/kt2.jpg"></li>
			<li><img src="img/kt3.jpg"><img src="img/kt3.jpg"></li>
			<li><img src="img/kt4.jpg"><img src="img/kt4.jpg"></li> -->
		</ul>
	</div>
</body>
</html>